<template>
  <div :style="{height: '100%','display':'flex','flex-direction':'column'}">
    <Toolbar
        ref="toolBar"
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        :style="{'flex':'auto'}"
        :modelValue="modelValue"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
        @onChange = "onChange"
      />
  </div>
</template>

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  height: {
    type: Number,
    default: 500,
  },
});

const mode = ref('default');

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {
    uploadImage: {
        maxFileSize: 4*1024*1024,
        server: '/api/file/uploadImage4WangEditor',
        customInsert(res,insertFn){
            insertFn(res.data.url,"","");
        }
    }
} }

const emit = defineEmits();
const onChange = (editor) => {
    emit("update:modelValue",editor.getHtml());
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>

<style scoped lang="scss">
::v-deep(.w-e-text-container){
    height: calc(100%);
}
</style>